<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column fixed prop="permissionId" label="权限编号" width="150" />
    <el-table-column prop="permissionName" label="权限名称" width="120" />
    <el-table-column prop="permissionUrl" label="权限URL" width="120" />
    <el-table-column prop="number" label="权限序号" width="120" />
    <el-table-column fixed="right" label="操作列" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="Fan(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
 <div >
<el-pagination
      v-model:current-page="Page.Pageindex"
      v-model:page-size="Page.Pagesize"
      :page-sizes="[2, 3, 4, 5]"

      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Page.totoCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    />
 </div> 
</template>


<script lang="ts" setup>

import { ref ,reactive,onMounted} from 'vue';
import{read} from '../Until/axiosHelp'
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();
const handleClick = () => {
  console.log('click')
}

const tableData =ref([])

let Page=ref({
    Pageindex:1,
    Pagesize:3,
    totoCount:0,
    totoPage:0
})
onMounted(()=>{
    Getdate()
})

const Getdate=()=>{
   read.get("api/Query/ShowPermission",{params:Page.value}).then(res=>{
     tableData.value=res.data.data.data
      Page.value.totoCount=res.data.data.totoCount
     Page.value.totoPage=res.data.data.totoPage
   })
}

const Fan=(row:any)=>{
    router.push({
      name:"UpdatePermission",
      query:{
        PermissionId:row.permissionId
      }
    })
}

const handleSizeChange = (val: number) => {
  Page.value.Pagesize=val;
  Getdate();
}
const handleCurrentChange = (val: number) => {
    Page.value.Pageindex=val;
  Getdate();
}
</script>
